<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="title flex-between flex-align-items-center">
        <div class="title-fl">编辑</div>
        <CloseOutlined class="title-fr" @click="close" />
      </div>
      <div class="main-top-btns flex">
        <p class="pointer" @click="addOne">添加一条</p>
      </div>
      <a-config-provider :locale="zhCN">
        <a-form @finish="submit" :model="fileList">
          <div class="file-list">
            <div class="head flex">
              <p>图片</p>
              <p>跳转链接</p>
              <p>操作</p>
            </div>
            <a-form-item v-for="(item, index) in fileList" :key="index">
              <div class="form-item flex flex-align-items-center">
                <a-form-item :name="[index, 'image']" :rules="[{ required: true, message: '请上传图片' }]"
                  class="left flex-center">
                  <a-upload v-model:file-list="item.fileList" name="avatar" list-type="picture-card"
                    class="avatar-uploader" :show-upload-list="false" accept="image/*"
                    @change="e => handleChange(e, index)">
                    <img v-if="item.image" :src="item.image" class="item-img" />
                    <div v-else>
                      <loading-outlined v-if="loading"></loading-outlined>
                      <plus-outlined v-else></plus-outlined>
                      <div class="ant-upload-text">上传</div>
                    </div>
                  </a-upload>
                </a-form-item>
                <a-form-item :name="[index, 'link']" :rules="[{ required: true, message: '请输入跳转链接' }]" class="right">
                  <a-input type="text" placeholder="请输入" v-model:value="item.link" maxlength="50" />
                </a-form-item>
                <div class="item-btns flex-center">
                  <p class="pointer" @click="delOne(index)">删除</p>
                </div>
              </div>
            </a-form-item>
          </div>
          <a-form-item class="form-btns">
            <div class="btns clear">
              <a-button type="primary" class="fr" html-type="submit" :loading="loading">确定</a-button>
              <a-button class="fr" @click="close">取消</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-config-provider>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, ref, defineProps, onMounted } from "vue";
import zhCN from "ant-design-vue/lib/locale/zh_CN";
import { message } from "ant-design-vue";
import api from '@/api/index.js';
import {
  CloseOutlined
} from "@ant-design/icons-vue";

const props = defineProps(['list']);
const emit = defineEmits(['close', 'change']);

const loading = ref(false);
const fileList = ref([]);

const close = () => {
  emit("close");
};
const addOne = () => {
  fileList.value.push({});
}
const delOne = index => {
  fileList.value.splice(index, 1);
}
const handleChange = (e, index) => {
  console.log(e)
  if (e.file.type.search('image') === -1) {
    ElMessage.error('请上传图片');
    return
  }
  if (e.file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不大于5MB');
    return
  }
  loading.value = true;
  let formData = new FormData();
  formData.append('file', e.file.originFileObj);
  formData.append('type', 1);
  api.base.uploadFile(formData).then(res => {
    loading.value = false;
    fileList.value[index].image = res.fullPath;
    fileList.value[index].fileList = [{ url: res.fullPath }];
  }).catch(err => {
    loading.value = false;
    ElMessage.error(err.msg);
  });
}
// 提交
const submit = () => {
  if (fileList.value.length === 0) {
    message.error('请至少添加一条');
    return;
  }
  emit("change", fileList.value);
};

onMounted(() => {
  props.list.forEach(item => {
    fileList.value.push({
      ...item,
      fileList: [{ url: item.image }]
    });
  });
});
</script>
<style lang="less" scoped>
.popup {
  z-index: 9999;

  .main {
    width: 680px !important;
    border-radius: 8px;
    background: #fff;

    .title {
      height: 56px;
      padding: 0 24px;
      border-bottom: 1px solid #f0f0f0;

      .title-fl {
        font-size: 16px;
        color: #262626;
        font-weight: bold;
      }

      .title-fr {
        color: #bfbfbf;
        cursor: pointer;
      }
    }

    .main-top-btns {
      padding: 0 24px;
      margin: 16px 0;

      p {
        color: #1677ff;
      }
    }

    .ant-form {
      .file-list {
        padding: 0 24px 16px;
        max-height: 500px;
        overflow-y: auto;

        .head {
          height: 40px;
          background: #fafafa;

          p {
            font-weight: bold;
            padding: 0 16px;
            line-height: 40px;

            &:first-child {
              width: 200px;
            }

            &:nth-child(2) {
              flex: 1;
            }

            &:last-child {
              text-align: center;
              width: 80px;
            }
          }
        }

        .form-item {
          margin-top: 16px;

          &::v-deep {
            .ant-form-item {
              margin-bottom: 0 !important;
            }

            .ant-upload {
              margin-inline-end: 0 !important;
              margin-bottom: 0 !important;
            }
          }

          .left {
            width: 200px;

            .item-img {
              width: 100px;
              height: 100px;
            }
          }

          .right {
            flex: 1;
          }

          .item-btns {
            width: 80px;

            p {
              color: #1677ff;
            }
          }
        }
      }

      .form-btns {
        margin-bottom: 0;

        .btns {
          padding: 10px 24px;
          border-top: 1px solid #f0f0f0;

          .ant-btn {
            margin-left: 8px;
          }
        }

        .ant-form-item-control-input {
          width: 100%;
        }
      }
    }
  }
}
</style>
